
<template>
  <view class="container" id="capture-area">
    <view class="main-info-box">
      <text class="title">个人简历</text>
      <!-- 新增横线 -->
      <view class="title-line"></view>

      <view class="info-modules">
        <!-- 基本信息 -->
        <!-- 修改基本信息模块 -->
        <!-- 基本信息 -->
        <view class="info-card" data-title="基本信息">
          <view class="info-list">
            <!-- 上半部分 -->
            <view class="top-section">
              <!-- 左列信息 -->
              <view class="left-row">
                <view class="info-item">
                  <text class="info-label">姓名：</text>
                  <text class="info-value">{{ resumeData.name }}</text>
                </view>
                <view class="info-item">
                  <text class="info-label">性别：</text>
                  <picker mode="selector" :range="genderOptions">
                    <text class="info-value">{{ resumeData.gender || '点击选择' }}</text>
                  </picker>
                </view>
                <view class="info-item">
                  <text class="info-label">出生年月：</text>
                  <picker mode="date">
                    <text class="info-value">{{ resumeData.birthday || '点击选择' }}</text>
                  </picker>
                </view>
              </view>

              <!-- 右列头像 -->
              <view class="right-row">
                <view class="avatar-container">
                  <image class="avatar-image" src="/static/ai-avatar.png" mode="aspectFill" />
                </view>
              </view>
            </view>

            <!-- 下半部分 -->
            <view class="bottom-section">
              <view class="info-item">
                <text class="info-label">求职意向：</text>
                <input class="info-value" v-model="resumeData.jobIntention" placeholder="点击输入" />
              </view>
              <view class="info-item">
                <text class="info-label">最高学历：</text>
                <input class="info-value" v-model="resumeData.education" placeholder="点击输入" />
              </view>
              <view class="info-item">
                <text class="info-label">电话号码：</text>
                <input class="info-value" v-model="resumeData.mobile" placeholder="点击输入" />
              </view>
            </view>
          </view>
        </view>

        <!-- 教育背景 -->
        <view class="info-card education-card" data-title="教育背景">
          <view class="education-container">
            <!-- 第一行 -->
            <view class="education-row">
              <view class="education-item">
                <text class="edu-label"></text>
                <text class="edu-value">{{ resumeData.startDate }}</text>
              </view>
              <view class="education-item">
                <text class="edu-label"></text>
                <text class="edu-value">{{ resumeData.endDate }}</text>
              </view>
              <view class="education-item">
                <text class="edu-label"></text>
                <text class="edu-value">{{ resumeData.university }}</text>
              </view>
            </view>

            <!-- 第二行 -->
            <view class="education-row">
              <view class="education-item full-width">
                <text class="edu-label">主修课程：</text>
                <text class="edu-value">{{ resumeData.majorCourses }}</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 校园经历 -->
        <!-- 实习经历模块 -->
        <view class="info-card" data-title="实习经历">
          <view class="content">
            <text class="internshipExperience">{{ resumeData.internshipExperience }}</text>
            <!-- <button class="ai-optimize-btn" @click="openAIOptimize('internshipExperience')">AI帮你优化</button> -->
          </view>
        </view>

        <!-- 校园经历模块 -->
        <view class="info-card" data-title="校园经历">
          <view class="content">
            <text class="campusExperience">{{ resumeData.campusExperience }}</text>
            <!-- <button class="ai-optimize-btn" @click="openAIOptimize('campusExperience')">AI帮你优化</button> -->
          </view>
        </view>


        <!-- 技能证书 -->
        <view class="info-card" data-title="技能证书">

          <view class="content"></view>
          <text class="skillCertificate">{{ resumeData.skillCertificate }}</text>
        </view>

        <!-- 自我评价 -->
        <view class="info-card" data-title="自我评价">

          <view class="content"></view>
          <text class="selfEvaluation">{{ resumeData.selfEvaluation }}</text>
          <!-- <button class="ai-optimize-btn" @click="openAIOptimize('selfEvaluation')">AI帮你优化</button> -->
        </view>
      </view>
    </view>
  </view>

</template>
<script setup lang="ts">
import { ref } from 'vue';
import type {resumeListInfo} from '@/types/resumeList'
import { getResumeListAPI } from '@/service/resumeList'
import { captureUni } from '@/utils/screenshot';
const resumeData = ref<resumeListInfo>({
  name: '张三',
  gender: '男',
  birthday: '2006-01-01',
  jobIntention: '软件工程师',
  education: '研究生',
  mobile: '15278963212',
  startDate: '2024.09',
  endDate: '2028.06',
  university: '清华大学',
  majorCourses: '计算机科学与技术',
  internshipExperience: '参与公司核心产品如电商平台/管理系统的后端开发使用Java/Spring Boot框架完成用户权限模块、订单管理系统的接口设计与实现，使用MySQL数据库存储用户信息与订单数据，并通过Redis缓存提高系统性能.',
  campusExperience: '主导开发「基于图论的校园导航系统」，使用Dijkstra算法优化路径规划，代码开源至GitHub（提交量20+）,设计高并发订单处理模块，采用Redis缓存+消息队列架构，QPS提升至5000+，并在阿里云服务器上部署项目，实现线上稳定运行。',
  skillCertificate: '大学英语四级（CET-4）,大学英语六级（CET-6）',
  selfEvaluation: '精通数据结构、算法设计、操作系统、数据库原理等核心课程，GPA 3.8/4.0（可替换实际数据），曾获校级"优秀毕业生"称号。参与《分布式系统》课程设计，独立完成P2P文件共享模块开发，代码通过GitHub开源社区收录。',
  userId: 0
})
// 修改按钮点击事件
// const openAIOptimize = (field: string) => {
//   uni.navigateTo({
//     url: `/pagesMy/AIOptimize/AIOptimize?field=${field}&content=${encodeURIComponent(resumeData.value[field])}`
//   })
// }


</script>

<style lang="scss">
.container {
  padding: 0; // 移除内边距
  display: flex;// 确保容器填满整个页面高度;
  background: #f5f5f5;
  min-height: 100vh;
}

.main-info-box {
  border: 40rpx solid #87CEEB;
  flex: 1;
  margin: 0;
  padding: 40rpx;
  background: white;
  position: relative;
  box-sizing: border-box;
  overflow: visible;
}
.title {
  color: #87CEEB;
  font-size: 44rpx;
  font-weight: bold;
  margin-bottom: 40rpx;
  display: block;
}

.title-line {
  height: 4rpx;
  background: #87CEEB;
  position: absolute;
  left: 0;            
  right: 0;           
  top: 120rpx;        
  margin: 0;
}


.info-modules {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.info-card {
    // border-left: 2rpx solid #999; // 左侧粗边框
    // border-top: 2rpx solid #999; // 顶部细边框
    border-bottom: 2rpx solid #999; 
    padding: 80rpx 0rpx 100rpx 30rpx; // 增加左边距
    margin-left: -1rpx; // 保证边框对齐
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 


  &:first-child {
    top: 20rpx;
    border-bottom: none;
    }
  &.education-card{
    border-top: 2rpx solid #999;
  }
  &:last-child {
    border-bottom: none;
  }
   &::before {
       content: attr(data-title);
       position: absolute;
       left: -8rpx; // 对齐调整
       top: -37rpx; // 向上延伸到标题线
       bottom: -40rpx; // 向下延伸到容器底部
       width: 33%;
       height: 50rpx;
       background: #87CEEB;
       color: white;
      font-size: 32rpx;
      display: flex;
      align-items: center;
      padding-left: 30rpx;
      border-top-right-radius: 20rpx; // 仅右上角圆角
      box-sizing: content-box;  
 
    }
       
}
.top-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10rpx;
}

.left-row {
  flex: 1;
  margin-right: 40rpx;
}


.bottom-section {
  // border-top: 2rpx solid #eee;
  padding-top: 10rpx;
}
.avatar-container {
  // 移除以下冲突样式
  // right: -190px;

  // 保留必要样式
  width: 220rpx;
  height: 280rpx;
  border-radius: 16rpx;
  overflow: hidden;
  background: #f5f5f5;
}


// 新增特定内容样式
.internshipExperience,
.campusExperience,
.skillCertificate,
.selfEvaluation {
  color: black;
  font-size: 28rpx;
}
.info-list {
  display: flex;
  flex-direction: column;
}
.basic-info-container {
  display: flex;
  justify-content: space-between;
}

.info-column {
  width: 48%;
}
.info-content {
  flex: 1;
  min-width: 450rpx; // 防止挤压的最小宽度
  padding-right: 40rpx; // 与头像间距
}
.avatar-container {
  position: relative;
  flex-shrink: 0; // 禁止压缩
  width: 220rpx; // 长方形宽度
  height: 280rpx; // 长方形高度
  border-radius: 16rpx;
  overflow: hidden;
  background: #f5f5f5;
  // right: -190px;
  
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.info-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  &:last-child {
    margin-bottom: 0;
  }
}

.info-label {
  color: #999;
  font-size: 28rpx;  
}

.info-value {
  color: #333;
  font-size: 32rpx;
  font-weight: 500;
  margin-top: 10rpx;
  display: block;
}


.education-container {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.education-row {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
}

.education-item {
  flex: 1;
  &.full-width {
    flex: 0 0 100%;
  }
}

.edu-label {
  color: #999;
  font-size: 28rpx;
  display: block;
  margin-bottom: 10rpx;
}

.edu-value {
  color: #333;
  font-size: 32rpx;
  font-weight: 500;
}
</style>